<template>
  <div class="index">
    <!--<img alt="Vue logo" src="../assets/logo.png">-->
    <img src="static/bg/bj.jpg"  lazy :style="contentStyleObj">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户登录</span>
      </div>
      <el-input v-model="form.account" placeholder="登录账号"></el-input>
      <el-input v-model="form.password" type="password"  placeholder="登录密码"></el-input>
      <el-button type="primary" @click="onSubmit">立即登录</el-button>
    </el-card>
  </div>
</template>

<script>
  import store from '@/store.js'
  export default {
    name: "index",
    data() {
      return {
        form: {
          account: '',
          password: '',

        },
        contentStyleObj:{
          height:'',
          width:''
        }
      }
    },
    methods:{
      getHeight(){
        this.contentStyleObj.height=window.innerHeight - 20 +'px';
        this.contentStyleObj.width=window.innerWidth - 16 +'px';
      },
      onSubmit(){
        if(this.form.account == "root" && this.form.password == "root"){
          store.commit("update","root")
          store.commit('number',777)
          this.$router.push({path:'/'})
          this.$message.success("登录成功")
        }else{
          this.$message({
            message: '账号密码错误 root/root',
            type: 'warning'
          });
        }

      }
    },

    created(){
      window.addEventListener('resize', this.getHeight);
      this.getHeight()
    },

    destroyed() {
      window.removeEventListener('resize', this.getHeight)
    }
  }
</script>

<style scoped>
  body{
    margin: 0;
  }
  .el-input,.el-button{
    margin-top: 10px;
  }
  .box-card {
    width: 360px;
    position: fixed;
    top: 20%;
    left: 50%;
    margin-left: -180px;
    text-align: center;
  }
</style>
